<template>
    <div :style="{width: width + 'px', height: height + 'px'}">
        <v-responsive :aspect-ratio="width/height"  v-if="value.length == 0" :class="{'empty-image': fileError}">
            <v-file-input
                style="display: none;"
                ref="file"
                hide-input
                accept="image/*"
                @change="changeFile"
                >
            </v-file-input>
            <v-btn 
                elevation="0"
                block
                color="#FB6267"
                :style="{backgroundImage: backgroundImage.length > 0 ? 'url('+backgroundImage +')' : false}"
                class="pa-8 white--text"
                @click="$refs.file.$refs.input.click()"
                style="height: 100%"
                :disabled="disabled"
                :loading="uploading"
            >
                 <v-icon color="white" x-small>mdi-plus</v-icon> 
                 <span>{{placeholder}}</span>
            </v-btn>
        </v-responsive>
        
        <div v-else>
            <v-file-input
                style="display: none;"
                ref="file"
                hide-input
                accept="image/*"
                @change="changeFile"
                >
            </v-file-input>
            <v-img  contain :src="value" :aspect-ratio="width/height" v-if="disabled"></v-img> 
            <v-img  contain :src="value" :aspect-ratio="width/height" v-else @click="$refs.file.$refs.input.click()"></v-img> 
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    export default {
        props: {
            backgroundImage: {
                type: String,
                default: ''
            },
            height: {
                type: Number,
                default: 200
            },
            width: {
                type: Number,
                default: 200
            },
            value:  {
                type: String,
                default: ''
            },
            placeholder:  {
                type: String,
                default: '上传图片'
            },
            disabled:  {
                type: Boolean,
                default: false
            },
        },
        data: () => ({
            fileError: false,
            uploading: false,
        }),

        created() {
        },

        methods: {
            changeFile(file) {
                this.uploadFile(file);
            },

            uploadFile(file){
                let form= new FormData();
                form.append('file', file)
                this.uploading = true;
                const that = this;
                axios.post('/v1/image/upload', form, { headers: {'Content-Type': 'multipart/form-data' } } )
                    .then((response) => {
                        if (response.data.code === 0) {
                            this.value = response.data.data;
                            this.fileError = false;
                            this.$emit('input', this.value);
                        } else {
                              that.$toasted.show(response.data.msg, {type: "error"});
                        }
                    })
                    .catch(function () {})
                    .then(function () {
                        that.uploading = false;
                    });
            },
        }
    }
</script>

<style scoped>
.empty-image {
    background-color: #ff5252 !important;
    border-color: #ff5252 !important;
    padding: 1px;
}
</style>